<template>
  <div>
    <!-- 把整体看作一个table -->
    <el-col class="el-col">
      <el-header style="font-size: 20px; font-weight: bold">
        <i class="el-icon-user-solid" style="margin-right: 15px"></i>
        <span>分布式节点管理</span>
      </el-header>
      <el-main>
        <el-button type="primary" style="margin-left: 10px" @click="baonewAdd"
          >新增节点</el-button
        >
        <el-button type="warning" @click="baodeleteAll">批量删除</el-button>
      </el-main>
      <el-table
        border
        ref="multipleTable"
        tooltip-effect="dark"
        @select="select"
        @select-all="select"
        :data="tableData"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="node_ip" label="节点地址"></el-table-column>
        <el-table-column prop="node_port" label="节点端口"></el-table-column>
        <el-table-column prop="node_name" label="节点所属"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              icon="el-icon-bottom"
              type="text"
              size="small"
              >连接测试</el-button
            >
            <el-button
              @click="handleDelete(scope.row)"
              icon="el-icon-circle-close"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-container> -->
      <el-footer style="margin-top: 20px">
        <template>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.length"
            ></el-pagination>
          </div>
        </template>
      </el-footer>
    </el-col>

    <!-- ----查看连接---- -->
    <el-dialog title="连接测试" :visible.sync="bao1look">
      <span>测试结果：<pre>{{res}}</pre> </span>
    </el-dialog>
    <el-dialog title="连接测试" :visible.sync="bao1look_bad">
      <span>连接失败</span>
    </el-dialog>

    <!-- ----新增节点---- -->
    <el-dialog title="新增节点" :visible.sync="bao1newadd">
      <el-form :model="AddInfo" ref="AddInfo">
        <el-form-item label="节点所属">
          <el-input
            style="display: inline-block; width: 33%"
            v-model="AddInfo.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="节点端口">
          <el-input
            style="display: inline-block; width: 33%"
            v-model="AddInfo.port"
          ></el-input>
        </el-form-item>
        <el-form-item label="节点地址">
          <el-input
            style="display: inline-block; width: 80%"
            v-model="AddInfo.ip"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮确定和取消 -->
      <span slot="footer">
        <el-button type="primary" @click.native="bao1AddSure">确定</el-button>
        <el-button @click.native="bao1newadd = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [
        {
          node_ip:this.$store.state.scanning.node_ip
        }
      ],
      biaoData: [],
      currentPage: 1,
      pagesize: 10,
      res : '',
      bao1look: false,
      bao1look_bad: false,
      bao1edit: false,
      bao1detele: false,
      bao1newadd: false,
      idx: null,
      deleteAll: [],
      del_list: [],
      //   通过姓名查询
      select_word: '',
      EditInfo: {
        name: '',
        ip: '',
        port: '',
      },
      AddInfo: {
        ip:  '',
        port: '',
        name: '',
      },
    }
  },
  mounted() {
    const url = 'http://localhost:5000/node'
    axios.get(url).then(response => {
      const result = response.data
      this.tableData = result.tableData
    })
  },
  methods: {
    // 分页------------------------
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },

    // 操作界面 ----------- 查看
    handleClick(e) {
      JSON.stringify(e)
      axios.post('http://localhost:5000/node_test',{'ip': e.node_ip, 'port': e.node_port})
        .then((response) => {
          this.bao1look = true
          const result = response.data
          this.res = result.res
        })
        .catch((error) => {
          this.bao1look_bad = true
        })
    },

    // 操作界面 ----------- 删除 -------
    handleDelete(row) {
      this.bao1detele = true
      console.log(row.node_ip);
      axios.post('http://localhost:5000/node_del', {'ip':row.node_ip})
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
      this.$message.warning('删除成功')
    },

    // 新增按钮-----
    baonewAdd() {
      this.bao1newadd = true
    },
    // 新增按钮----- 新增 ----确定按钮
    bao1AddSure() {
      //this.$refs.AddInfo 这个数据上有一个validate方法,这个方法可以判断数据是否存在
      this.$refs.AddInfo.validate((valid) => {
        if (valid) {
          // 删除尾部数据，并且在头部添加
          this.data.pop()
          this.data.unshift(this.AddInfo)
          axios.post('http://localhost:5000/node_add', {'ip':this.AddInfo.ip, 'port':this.AddInfo.port, 'name':this.AddInfo.name})
            .then((response) => {
              console.log(response)
            })
            .catch((error) => {
              console.log(error)
            })
          this.bao1newadd = false
          this.$message.success('新增节点成功')
        }
      })
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件, 将所有的勾选的数据集中到一个数组中
    select(selection, row) {
      this.deleteAll = selection
    },
    // 批量删除-----all
    baodeleteAll() {
      // console.log(this.deleteAll);
      if (this.deleteAll.length) {
        this.del_list = this.del_list.concat(this.deleteAll)
        this.deleteAll = []
        this.$message.success('删除成功')
      } else {
        this.$message.warning('请选择删除目标')
      }
    },
  },
  computed: {
    data() {
      return this.biaoData.filter((item) => {
        // return item;
        let is_del = false
        for (let i = 1; i < this.del_list.length; i++) {
          if (item.name === this.del_list[i].name) {
            is_del = true
            break
          }
        }
        if (!is_del) {
          if (
            item.name.indexOf(this.select_word) > -1 ||
            item.address.indexOf(this.select_word) > -1
          ) {
            return item
          }
        }
      })
    },
  },
}
</script>


<style scoped>
.el-header {
  background-color: rgba(51, 48, 51, 0.219);
  color: #333;
  line-height: 60px;
}
</style>
